<template>
  <div>
    <div class="flex-row">
      <el-card :style="item.color" v-for="item in cardList">
           <div class="card-block">
             <div style="font-size: 16px;">{{item.name}}</div>
             <div style="height: 54px"></div>
             <div><span style="font-size: 28px;font-weight: bold;margin-top: 20px">{{item.total}}</span>件</div>
           </div>
           <div class="card-block info">
             <div  class="info-text">药品类：{{item.medical}}</div>
             <div class="info-text">医疗器械类：{{item.machine}}</div>
             <div class="info-text">化妆品类：{{item.Cosmetics}}</div>
           </div>
      </el-card>
    </div>
    <div class="flex-column">
      <div class="flex-row gutter">
        <el-card class="width60">
          <div slot="header" class="clearfix">
            <span>对外服务情况</span>
            <el-date-picker
              v-model="value3"
              type="year"
              placeholder="选择年">
            </el-date-picker>
          </div>
          <div id="charts-one" class="big-charts"></div>
        </el-card>
        <el-card class="width40">
          <div slot="header" class="clearfix">
            <span>扫描任务量</span>
            <el-date-picker
              v-model="value2"
              type="month"
              placeholder="选择月">
            </el-date-picker>
          </div>
          <div id="charts-two" class="small-charts"></div>
        </el-card>
      </div>
      <div class="flex-row gutter">
        <el-card class="width40">
          <div slot="header" class="clearfix">
            <span>企业归档情况</span>
          </div>
          <div id="charts-three" class="small-charts"></div>
        </el-card>
        <el-card class="width60">
          <div slot="header" class="clearfix">
            <span>档案入库情况</span>
            <div>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-date-picker
                v-model="value3"
                type="year"
                placeholder="选择年">
              </el-date-picker>
            </div>
          </div>
          <div id="charts-four" class="big-charts"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "echarts",
  data(){
    return{
      seriesData:[],
      cardList:[
        {
          name:"行政许可",
          total:1520,
          color:{
            background:" linear-gradient(to right, #36D1DC, #5B86E5)",
            width:"22%",
            height:"200px",
            color:"white"
          },
          medical:1000,
          machine:200,
          Cosmetics:320
        },
        {
          name:"监督检查",
          total:1520,
          color:{
            background:" linear-gradient(to right, #FF416C, #FF4B2B)",
            width:"22%",
            height:"200px",
            color:"white"
          },
          medical:1000,
          machine:200,
          Cosmetics:320
        },
        {
          name:"稽查执法",
          total:1520,
          color:{
            background:" linear-gradient(to right, #6a3093, #a044ff)",
            width:"22%",
            height:"200px",
            color:"white"
          },
          medical:1000,
          machine:200,
          Cosmetics:320
        },
        {
          name:"其它",
          total:1520,
          color:{
            background:" linear-gradient(to right, #fe8c00, #f83600)",
            width:"22%",
            height:"200px",
            color:"white"
          },
          medical:1000,
          machine:200,
          Cosmetics:320
        }
      ],
      option_one:{
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 258, 218, 135, 147, 260,340,367,390,410,480],
            type: 'line'
          }
        ]
      },
      option_two:{
        xAxis: {
          type: 'category',
          data: ['总计', '药品', '医疗器械', '化妆品']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            barWidth:40,
            itemStyle:{
              normal:{
                label:{
                  show:true,
                  position:'top',
                  formatter:'{c}件'
                }
              }
            },
            data: [
              {
                value: 1000,
                itemStyle: {
                  color: '#36D1DC'
                }
              },
              {
                value: 700,
                itemStyle: {
                  color: '#FF416C'
                }
              },
              {
                value: 100,
                itemStyle: {
                  color: '#6a3093'
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: '#fe8c00'
                }
              },
            ],
            type: 'bar'
          }
        ]
      },
      option_three:{
        title:[
          {
            text:'▼',
            left:'28%',
            top: '34%'
          },
          {
            text:'1500',
            top:'46%',
            left:'18%',
            textStyle:{
              fontSize:40,
              fontWeight:'bold'
            }
          },
          {
            text:'家',
            top:'49%',
            left:'35%'
          },
          {
            text:'总数',
            left:'27%',
            top:'60%',
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon:'circle',
          right:'6%',
          top:'center',
          orient:'vertical',
          itemGap:30,
          textStyle:{
            fontSize: 16,
            // fontWeight: 'bold'
          },
          formatter:(name)=>{
            if(this.seriesData.length>0){
              let item=this.seriesData.filter((val)=>val.name==name)[0]
              return `${item.name}：${item.value}家`
            }
          },
          data: [
            '药品类企业','医疗器械类企业','化妆品类企业'
          ]
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            center:['30%','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1000, name: '药品类企业',itemStyle:{color:'#3F5EFB'} },
              { value: 200, name: '医疗器械类企业' ,itemStyle:{color:'#FC466B'}},
              { value: 300, name: '化妆品类企业',itemStyle:{color:'#F2C94C'} },
            ]
          }
        ]
      },
      option_four:{
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [110,80,90],
            type: 'bar',
            itemStyle:{
              borderRadius:[40,40,0,0],
            },
            barWidth:20,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  },
  methods:{
    fnLoadCharts(){
      let charts_one=this.$echarts.init(document.getElementById('charts-one'))
      let charts_two=this.$echarts.init(document.getElementById('charts-two'))
      let charts_three=this.$echarts.init(document.getElementById('charts-three'))
      let charts_four=this.$echarts.init(document.getElementById('charts-four'))
      charts_one.setOption(this.option_one)
      charts_two.setOption(this.option_two)
      charts_three.setOption(this.option_three)
      charts_four.setOption(this.option_four)
      window.onresize = function() {
        charts_one.resize();
        charts_two.resize();
        charts_three.resize();
        charts_four.resize();
      };
    }
  },
  mounted() {
    this.seriesData=[
      { value: 1000, name: '药品类企业' },
      { value: 200, name: '医疗器械类企业' },
      { value: 300, name: '化妆品类企业' },
    ]
    this.fnLoadCharts()
  }
}
</script>

<style scoped>
.width60{
  width: 60%;
}
.width40{
  width: 38%;
}
.flex-row{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.flex-column{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.card-block{
  width: 48%;
  display: inline-block;
  margin: 20px 0;
}
.gutter{
  margin-top: 20px;
}
.clearfix{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.info{
  font-size: 14px;
}
.info-text{
  line-height: 40px;
  /*height: 20px;*/
}
.big-charts{
  width: 1000px;
  height: 400px
}
.small-charts{
  width: 600px;
  height: 400px
}
/deep/.el-input__inner{
  width: 100% !important;
}
</style>
